<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>产品详情页</title>
	<link rel="icon" href="assets/img/favicon.ico">

	<link rel="stylesheet" type="text/css" href="css/webbase.css" />
	<link rel="stylesheet" type="text/css" href="css/pages-item.css" />
	<link rel="stylesheet" type="text/css" href="css/pages-zoom.css" />
	<link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css" />
</head>

<style>
	.comment .comment-item {
		zoom: 1;
		padding: 15px;
		border-bottom: 1px solid #ddd;
	}

	body {
		font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
		-webkit-font-smoothing: antialiased;
		color: #666;
		background: #fff;
	}

	.comment .comment-item .user-column {
		width: 140px;
		float: left;
	}
	.comment .comment-item .user-info {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}


	.comment .comment-item .user-level {
		padding-top: 3px;
	}

	.comment .comment-item .comment-column {
		margin-left: 150px;
	}

	.comment .comment-item .star5 {
		background-position: 0 0;
	}

	.comment .comment-item .comment-con {
		font-size: 14px;
		padding: 10px 0;
		line-height: 180%;
		color: #333;
	}

	.comment .comment-item .pic-list {
		padding-bottom: 15px;
	}

	a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var {
		margin: 0;
		padding: 0;
	}

	a:hover {
		color: #e4393c;
	}



</style>

<script>
	//sku列表 freemarker不会吧Java的list自动转换成js的数组的，需要我们自己手动转换
	var itemList = [
		<#list itemList as item>
		{
			"id":${item.id?c},
			"title":"${item.title}",
			"sellPoint":"${item.sellPoint}",
			"price":${item.price?c},
			"spec":${item.spec}
		},
		</#list>
	];

</script>
<body>
<#include "head.ftl">
<#assign images=goodsDesc.itemImages?eval>
<#assign customList=goodsDesc.customAttributeItems?eval>
<#assign specList = goodsDesc.specificationItems?eval>

<div class="py-container">
	<div id="item">
		<div class="crumb-wrap">
			<ul class="sui-breadcrumb">
				<li>
					<a href="#">${itemCat1.name}</a>
				</li>
				<li>
					<a href="#">${itemCat2.name}</a>
				</li>
				<li>
					<a href="#">${itemCat3.name}</a>
				</li>
				<li class="active">${goods.goodsName}</li>
			</ul>
		</div>
		<!--product-info-->
		<div class="product-info">
			<div class="fl preview-wrap">
				<!--放大镜效果-->
				<div class="zoom">
					<!--默认第一个预览-->
					<div id="preview" class="spec-preview">
						<#if images?size gt 0>
							<span class="jqzoom"><img jqimg="${images[0].url}" src="${images[0].url}" /></span>
						</#if>
					</div>
					<!--下方的缩略图-->
					<div class="spec-scroll">
						<a class="prev">&lt;</a>
						<!--左右按钮-->
						<div class="items">
							<ul>
								<#list images as image>
									<#if image??>
										<li><img src="${image.url}" bimg="${image.url}" onmousemove="preview(this)" /></li>
									</#if>
								</#list>
							</ul>
						</div>
						<a class="next">&gt;</a>
					</div>
				</div>
			</div>
			<div class="fr itemInfo-wrap">
				<div class="sku-name">
					<h4 id="skuName">${goods.goodsName}</h4>
				</div>
				<div class="news"><span>${goods.caption}</span></div>
				<div class="summary">
					<div class="summary-wrap">
						<div class="fl title">
							<i>价　　格</i>
						</div>
						<div class="fl price">
							<i>¥</i>
							<span id="itemPrice">${goods.price}</span>
							<span>降价通知</span>
						</div>
						<div class="fr remark">
							<i>累计评价</i><em>612188</em>
						</div>
					</div>
					<div class="summary-wrap">
						<div class="fl title">
							<i>促　　销</i>
						</div>
						<div class="fl fix-width">
							<i class="red-bg">加价购</i>
							<em class="t-gray"><span id="sellPoint"></span></em>
						</div>
					</div>
				</div>
				<div class="support">
					<div class="summary-wrap">
						<div class="fl title">
							<i>支　　持</i>
						</div>
						<div class="fl fix-width">
							<em class="t-gray">以旧换新，闲置手机回收  4G套餐超值抢  礼品购</em>
						</div>
					</div>
					<div class="summary-wrap">
						<div class="fl title">
							<i>配 送 至</i>
						</div>
						<div class="fl fix-width">
							<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
						</div>
					</div>
				</div>
				<div class="clearfix choose">
					<div id="specification" class="summary-wrap clearfix">
						<#list specList as spec>
							<dl>
								<dt>
									<div class="fl title">
										<i>${spec.attributeName}</i>
									</div>
								</dt>
								<#--
                                    <span title="点击取消选择">&nbsp;</span>
                                    class="selected"
                                -->
								<#list spec.attributeValue as specValue>
									<dd><a href="javascript:selectSpec('${spec.attributeName}','${specValue}');" name="options" >${specValue}<span title="点击取消选择">&nbsp;</span>
										</a></dd>
								</#list>
							</dl>
						</#list>
					</div>

					<div class="summary-wrap">
						<div class="fl title">
							<div class="control-group">
								<div class="controls">
									<input autocomplete="off" type="text" id="number" value="1" minnum="1" class="itxt" />
									<a href="javascript:increment(1)" class="increment plus">+</a>
									<a href="javascript:increment(-1)" class="increment mins">-</a>
								</div>
							</div>
						</div>
						<div class="fl">
							<ul class="btn-choose unstyled">
								<li>
									<a href="javascript:addTbCart()" class="sui-btn  btn-danger addshopcar">加入购物车</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--product-detail-->
		<div class="clearfix product-detail">
			<div class="fl aside">
				<ul class="sui-nav nav-tabs tab-wraped">
					<li class="active">
						<a href="#index" data-toggle="tab">
							<span>相关分类</span>
						</a>
					</li>
					<li>
						<a href="#profile" data-toggle="tab">
							<span>推荐品牌</span>
						</a>
					</li>
				</ul>
				<div class="tab-content tab-wraped">
					<div id="index" class="tab-pane active">
						<ul class="part-list unstyled">
							<li>手机</li>
							<li>手机壳</li>
							<li>内存卡</li>
							<li>Iphone配件</li>
							<li>贴膜</li>
							<li>手机耳机</li>
							<li>移动电源</li>
							<li>平板电脑</li>
						</ul>
						<ul class="goods-list unstyled">
							<li>
								<div class="list-wrap">
									<div class="p-img">
										<img src="img/_/part01.png" />
									</div>
									<div class="attr">
										<em>Apple苹果iPhone 6s (A1699)</em>
									</div>
									<div class="price">
										<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
									</div>
									<div class="operate">
										<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
									</div>
								</div>
							</li>
							<li>
								<div class="list-wrap">
									<div class="p-img">
										<img src="img/_/part02.png" />
									</div>
									<div class="attr">
										<em>Apple苹果iPhone 6s (A1699)</em>
									</div>
									<div class="price">
										<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
									</div>
									<div class="operate">
										<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
									</div>
								</div>
							</li>
							<li>
								<div class="list-wrap">
									<div class="p-img">
										<img src="img/_/part03.png" />
									</div>
									<div class="attr">
										<em>Apple苹果iPhone 6s (A1699)</em>
									</div>
									<div class="price">
										<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
									</div>
									<div class="operate">
										<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
									</div>
								</div>
								<div class="list-wrap">
									<div class="p-img">
										<img src="img/_/part02.png" />
									</div>
									<div class="attr">
										<em>Apple苹果iPhone 6s (A1699)</em>
									</div>
									<div class="price">
										<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
									</div>
									<div class="operate">
										<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
									</div>
								</div>
								<div class="list-wrap">
									<div class="p-img">
										<img src="img/_/part03.png" />
									</div>
									<div class="attr">
										<em>Apple苹果iPhone 6s (A1699)</em>
									</div>
									<div class="price">
										<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
									</div>
									<div class="operate">
										<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<div id="profile" class="tab-pane">
						<p>推荐品牌</p>
					</div>
				</div>
			</div>
			<div class="fr detail">
				<div class="clearfix fitting">
					<h4 class="kt">选择搭配</h4>
					<div class="good-suits">
						<div class="fl master">
							<div class="list-wrap">
								<div class="p-img">
									<img src="img/_/l-m01.png" />
								</div>
								<em>￥5299</em>
								<i>+</i>
							</div>
						</div>
						<div class="fl suits">
							<ul class="suit-list">
								<li class="">
									<div id="">
										<img src="img/_/dp01.png" />
									</div>
									<i>Feless费勒斯VR</i>
									<label data-toggle="checkbox" class="checkbox-pretty">
										<input type="checkbox"><span>39</span>
									</label>
								</li>
								<li class="">
									<div id=""><img src="img/_/dp02.png" /> </div>
									<i>Feless费勒斯VR</i>
									<label data-toggle="checkbox" class="checkbox-pretty">
										<input type="checkbox"><span>50</span>
									</label>
								</li>
								<li class="">
									<div id=""><img src="img/_/dp03.png" /></div>
									<i>Feless费勒斯VR</i>
									<label data-toggle="checkbox" class="checkbox-pretty">
										<input type="checkbox"><span>59</span>
									</label>
								</li>
								<li class="">
									<div id=""><img src="img/_/dp04.png" /></div>
									<i>Feless费勒斯VR</i>
									<label data-toggle="checkbox" class="checkbox-pretty">
										<input type="checkbox"><span>99</span>
									</label>
								</li>
							</ul>
						</div>
						<div class="fr result">
							<div class="num">已选购0件商品</div>
							<div class="price-tit"><strong>套餐价</strong></div>
							<div class="price">￥5299</div>
							<button class="sui-btn  btn-danger addshopcar">加入购物车</button>
						</div>
					</div>
				</div>
				<div class="tab-main intro">
					<ul class="sui-nav nav-tabs tab-wraped">
						<li class="active">
							<a href="#one" data-toggle="tab">
								<span>商品介绍</span>
							</a>
						</li>
						<li>
							<a href="#two" data-toggle="tab">
								<span>规格与包装</span>
							</a>
						</li>
						<li>
							<a href="#three" data-toggle="tab">
								<span>售后保障</span>
							</a>
						</li>
						<li>
							<a href="#four" data-toggle="tab" onclick="getComment()">
								<div  style="margin-top: 20px">
									<div class="comment-item" data-guid="1021244c-12e8-43ed-9bab-dc8d91f0a553" data-top="">
										<div class="user-column">
											<div class="user-info">
												<img src="//misc.360buyimg.com/user/myjd-2015/css/i/peisong.jpg" width="25" height="25" alt="定格一后" class="avatar">
												定格一后&nbsp;&nbsp;<span>2019\12\12&nbsp; 12:35:66</span>
											</div>
											<div class="user-level">
												<span style="color: rgb(136, 136, 136);"></span>
											</div>
										</div>
										<div class="comment-column J-comment-column"  style="margin-top: 10px">
											<div class="comment-star star5"></div>
											<p class="comment-con">黑色这款相当大气，*外形看起来舒服，双面玻璃，不锈钢机身，四周钢琴烤漆，握起来很有手感，也很大气，手感不错，有份量，音效也还不错，摄像头实拍真实，拍出来的视频也还可以，下了几个app运行的还比较顺畅，暂无卡顿，待机时间比以前几款好多了，整体来说是个不错的选择！手感特别好，颜色很喜欢，大小很合适，特别好看，屏幕音效也特别好，特别特别喜欢，拍照效果也特别好，很清楚，运行速度那就没得说，特别快，面容特别快，待机也很好。这款机子颜色特别多，本人喜欢紫色，特意选了紫色很适合女性朋友们，淡淡的紫色很好看，领了500元的优惠券价格很合适，推荐大家购买，简直没得说大小正好，颜色很喜欢，照相很清楚 像素很好，很清晰，运行速度很快，很流畅。比现在用的流畅待机时间长。很喜欢也很推荐购买！</p>

											<div class="J-pic-view-wrap clearfix" data-rotation="0"></div>
											<div class="J-video-view-wrap clearfix">
												<img src="http://dongdongshop-gcx.oss-cn-beijing.aliyuncs.com/1589192372047/m2a1aac6664bcc6ee35469307ccb148fc8.jpg?Expires=1590663601&OSSAccessKeyId=LTAI4GC7xQqbznnmarGShnMb&Signature=rQ00CEF0j%2B0%2BPv0za0AKm15ALVc%3D"/ />
												<a  title="点赞">点赞</a>
											</div>
											<span>规格</span>
										</div>
									</div>
								</div>

								<div style="margin-top: 20px">
									<div class="comment-item" data-guid="1021244c-12e8-43ed-9bab-dc8d91f0a553" data-top="">
										<div class="user-column">
											<div class="user-info">
												<img src="//misc.360buyimg.com/user/myjd-2015/css/i/peisong.jpg" width="25" height="25" alt="定格一后" class="avatar">
												定格一后&nbsp;&nbsp;<span>2019\12\12&nbsp; 12:35:66</span>
											</div>
											<div class="user-level">
												<span style="color: rgb(136, 136, 136);"></span>
											</div>
										</div>
										<div class="comment-column J-comment-column" style="margin-top: 10px">
											<div class="comment-star star5"></div>
											<p class="comment-con">黑色这款相当大气，*外形看起来舒服，双面玻璃，不锈钢机身，四周钢琴烤漆，握起来很有手感，也很大气，手感不错，有份量，音效也还不错，摄像头实拍真实，拍出来的视频也还可以，下了几个app运行的还比较顺畅，暂无卡顿，待机时间比以前几款好多了，整体来说是个不错的选择！手感特别好，颜色很喜欢，大小很合适，特别好看，屏幕音效也特别好，特别特别喜欢，拍照效果也特别好，很清楚，运行速度那就没得说，特别快，面容特别快，待机也很好。这款机子颜色特别多，本人喜欢紫色，特意选了紫色很适合女性朋友们，淡淡的紫色很好看，领了500元的优惠券价格很合适，推荐大家购买，简直没得说大小正好，颜色很喜欢，照相很清楚 像素很好，很清晰，运行速度很快，很流畅。比现在用的流畅待机时间长。很喜欢也很推荐购买！</p>

											<div class="J-pic-view-wrap clearfix" data-rotation="0"></div>
											<div class="J-video-view-wrap clearfix">
												<img src="http://dongdongshop-gcx.oss-cn-beijing.aliyuncs.com/1589192372047/m2a1aac6664bcc6ee35469307ccb148fc8.jpg?Expires=1590663601&OSSAccessKeyId=LTAI4GC7xQqbznnmarGShnMb&Signature=rQ00CEF0j%2B0%2BPv0za0AKm15ALVc%3D"/ />
												<a  title="点赞">点赞</a>
											</div>
											<span>规格</span>
										</div>
									</div>
								</div>
							</a>
						</li>
						<li>
							<a href="#five" data-toggle="tab">
								<span>手机社区</span>
							</a>
						</li>
					</ul>
					<div class="clearfix"></div>
					<div class="tab-content tab-wraped">
						<div id="one" class="tab-pane active">
							<ul class="goods-intro unstyled">
								<#list customList as custom>
									<#if custom??>
										<li>${custom.text}：${custom.value}</li>
									</#if>
								</#list>
							</ul>
							<div class="intro-detail">
								${goodsDesc.introduction}
							</div>
						</div>
						<div id="two" class="tab-pane">
							<p>${goodsDesc.packageList}</p>
						</div>
						<div id="three" class="tab-pane">
							<p>${goodsDesc.saleService}</p>
						</div>
						<div id="four" class="tab-pane">
							<p>商品评价</p>
						</div>
						<div id="five" class="tab-pane">
							<p>手机社区</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--like-->
		<div class="clearfix"></div>
		<div class="like">
			<h4 class="kt">猜你喜欢</h4>
			<div class="like-list">
				<ul class="yui3-g">
					<li class="yui3-u-1-6">
						<div class="list-wrap">
							<div class="p-img">
								<img src="img/_/itemlike01.png" />
							</div>
							<div class="attr">
								<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
							</div>
							<div class="price">
								<strong>
									<em>¥</em>
									<i>3699.00</i>
								</strong>
							</div>
							<div class="commit">
								<i class="command">已有6人评价</i>
							</div>
						</div>
					</li>
					<li class="yui3-u-1-6">
						<div class="list-wrap">
							<div class="p-img">
								<img src="img/_/itemlike02.png" />
							</div>
							<div class="attr">
								<em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
							</div>
							<div class="price">
								<strong>
									<em>¥</em>
									<i>4388.00</i>
								</strong>
							</div>
							<div class="commit">
								<i class="command">已有700人评价</i>
							</div>
						</div>
					</li>
					<li class="yui3-u-1-6">
						<div class="list-wrap">
							<div class="p-img">
								<img src="img/_/itemlike03.png" />
							</div>
							<div class="attr">
								<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
							</div>
							<div class="price">
								<strong>
									<em>¥</em>
									<i>4088.00</i>
								</strong>
							</div>
							<div class="commit">
								<i class="command">已有700人评价</i>
							</div>
						</div>
					</li>
					<li class="yui3-u-1-6">
						<div class="list-wrap">
							<div class="p-img">
								<img src="img/_/itemlike04.png" />
							</div>
							<div class="attr">
								<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
							</div>
							<div class="price">
								<strong>
									<em>¥</em>
									<i>4088.00</i>
								</strong>
							</div>
							<div class="commit">
								<i class="command">已有700人评价</i>
							</div>
						</div>
					</li>
					<li class="yui3-u-1-6">
						<div class="list-wrap">
							<div class="p-img">
								<img src="img/_/itemlike05.png" />
							</div>
							<div class="attr">
								<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
							</div>
							<div class="price">
								<strong>
									<em>¥</em>
									<i>4088.00</i>
								</strong>
							</div>
							<div class="commit">
								<i class="command">已有700人评价</i>
							</div>
						</div>
					</li>
					<li class="yui3-u-1-6">
						<div class="list-wrap">
							<div class="p-img">
								<img src="img/_/itemlike06.png" />
							</div>
							<div class="attr">
								<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
							</div>
							<div class="price">
								<strong>
									<em>¥</em>
									<i>4088.00</i>
								</strong>
							</div>
							<div class="commit">
								<i class="command">已有700人评价</i>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

<script>
	function getComment(){
		$.ajax({
			url: "http://127.0.0.1:9003/commentController/getComment",
			data: {},
			type: "post",
			dataType: "json",
			async: false,
			success: function (result) {
				var comments = result.data;
				var html = "";
				$(comments).each(function(i,e){
					html += '<div  style="margin-top: 20px">'+
							'<div class="comment-item" data-guid="1021244c-12e8-43ed-9bab-dc8d91f0a553" data-top="">'+
							'<div class="user-column">'+
							'<div class="user-info">'+
							'<img src="//misc.360buyimg.com/user/myjd-2015/css/i/peisong.jpg" width="25" height="25" alt="" class="avatar">'+
							'多少少&nbsp;&nbsp;<span>'+this.commentTime+'</span>'+
							'</div>'+
							'<div class="user-level">'+
							'	<span style="color: rgb(136, 136, 136);"></span>'+
							'</div>'+
							'</div>'+
							'<div class="comment-column J-comment-column"  style="margin-top: 10px">'+
							'<div class="comment-star star5"></div>'+
							'<p class="comment-con">'+this.content+'</p>'+
							''+
							'<div class="J-pic-view-wrap clearfix" data-rotation="0"></div>'+
							'<div class="J-video-view-wrap clearfix">'+
							'	<img src="'+this.imgAddress+'"/ />'+
							'	<a  title="点赞" onclick="incComment(\''+this.id+'\','+this.userId+')">点赞</a>'+
							'</div>'+
							'<span>'+this.goodsAndSpecs+'</span>'+
							'</div>'+
							'</div>'+
							'</div>'
				})
				$("#four").html(html);
			},
			error: function () {
				alert("异常")
			}
		})
	}

	function incComment(id,userId) {
		$.ajax({
			url: "http://127.0.0.1:9003/commentController/incComment",
			data: {id:id,userId:userId},
			type: "post",
			dataType: "json",
			async: false,
			success: function (result) {
				if (result.data == 1){
					alert("点赞成功")
				} else if (result.data == -1){
					alert("取消成功")
				}
			},
			error: function () {
				alert("异常")
			}
		})
	}
</script>

<!-- 底部栏位 -->

<#include "foot.ftl">
</body>

</html>